<template>
    <div style="width: 90%;height: 100vh;padding: 40px 0px;color:var(--color-neutral-10);max-width: 1550px;margin: 0 auto">
      <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">收费管理</p>
      <div style="width: 100%;height: calc(100% - 64px);position: relative">
        <div style="width: calc(100%);height: 100%;display: inline-block;overflow-y: auto">
          <div style="margin-bottom: 20px;width: 100%;position: relative">
            <a-input :disabled="data.loading" v-model="data.form.key" style="border: 0px;line-height: 36px;display: inline-block;width: 200px;margin-right: 10px;background-color: transparent;border-bottom: 1px solid var(--color-neutral-10)" placeholder="序列号"></a-input>
            <v-btn :loading="data.loading" style="margin-right: 10px" variant="text"
                   @click="getTable"
            >搜索/刷新</v-btn>
            <a-trigger trigger="click" :unmount-on-close="false">
              <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"
  
              >导入</v-btn>
              <template #content>
                <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                  <p style="color: var(--color-neutral-10)">请导入Excel文件，表格第一行标题应依次为序列号、类型和有效年份。</p>
                  <a-upload @success="imported" :action="appData.serverURL + '/bg/card/import'"></a-upload>
                </div>
              </template>
            </a-trigger>
            <div v-if="data.form.total>data.form.size" style="display: inline-block;float: right">
              <v-btn variant="text" @click="data.form.page=1;getTable()" :disabled="data.loading || data.form.page==1" style="margin-left: 5px">第一页</v-btn>
              <v-btn variant="text" @click="data.form.page-=1;getTable()" :disabled="data.loading || data.form.page==1" style="margin-left: 5px">上一页</v-btn>
              <a-trigger trigger="click" :unmount-on-close="false">
                <v-btn variant="text" :disabled="data.loading" style="margin-left: 5px">{{ data.form.page.toString() + '/' + data.form.pageTotal.toString() }}</v-btn>
                <template #content>
                  <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1)">
                    <a-input v-model="data.form.pageInput" placeholder="页码" style="width: 70px;"></a-input><a-button :loading="data.loading" @click="tableChangePage" :disabled="data.form.pageInput==''" style="margin-left: 5px">转到</a-button>
                    <br>
                    <p v-if="data.form.warningText!=''" style="color: red">{{ data.form.warningText }}</p>
                  </div>
                </template>
              </a-trigger>
              <v-btn variant="text" @click="data.form.page+=1;getTable()" :disabled="data.loading || data.form.page==data.form.pageTotal" style="margin-left: 5px">下一页</v-btn>
              <v-btn variant="text" @click="data.form.page=data.form.pageTotal;getTable()" :disabled="data.loading || data.form.page==data.form.pageTotal" style="margin-left: 5px">最后一页</v-btn>
            </div>
          </div>
          <a-table @row-click="tableRowClick" :pagination="false" :loading="data.loading" style="width: 100%;" :columns="[
    { dataIndex: 'mark', title: '标记' },
    { dataIndex: 'key', title: '序列号' },
    { dataIndex: 'type', title: '类型' },
    { dataIndex: 'userMark', title: '用户mark' },
    { dataIndex: 'year', title: '有效年份' },
  ]" :data="data.table" />
        </div>
  
      </div>
    </div>
    <a-modal v-model:visible="data.showEditcardInfoForm" @ok="changecardInfo" :closable="data.isSaving==false" :mask-closable="data.isSaving==false" :ok-loading="data.isSaving">
      <template #title>
        编辑卡信息
      </template>
      <div style="max-height: calc(80vh - 48px - 65px);overflow-y: scroll">
        <v-btn @click="deleteSingle" variant="text" style="margin-bottom: 10px;">删除</v-btn>
        <data-editor :read-only="data.isSaving==true" @dataChanged="cardInfoChanged" style="color: var(--color-neutral-10);width: 100%;background-color: white;border-radius: 5px;padding: 15px 15px 5px 15px" v-if="data.showEditcardInfoForm" :data="data.editcardInfoSelectedItem"></data-editor>
      </div>
    </a-modal>
  </template>
  
  <script>
  import tool from '@/utlis/tool'
  import config from '@/config'
  import dataEditor from "@/components/dataEditor.vue";
  import axios from "axios";
  
  export default {
    components: {
      dataEditor
    },
    name: '',
    data() {
      return {
        data: {
          loading: false,
          form: {
            page: 1,
            size: 25,
            total: 0,
            pageTotal: 0,
            pageInput: '',
            warningText: '',
            key: ''
          },
          table: [],
          showEditcardInfoForm: false,
          editcardInfoSelectedItem: undefined,
          editcardInfoSelectedItemMark: undefined,
          isSaving: false,
        }
      }
    },
  
    methods: {
      async changecardInfo() {
        this.data.isSaving = true
        this.data.editcardInfoSelectedItem['mark'] = this.data.editcardInfoSelectedItemMark.toString()
        const data = tool.encodeString(JSON.stringify({
          token: this.bgData.loginedAdminInfo.token,
          item: this.data.editcardInfoSelectedItem
        }))
        const file = new Blob([data], {type: 'text/plain'});
        const formData = new FormData();
        formData.append('file', file, 'filename.txt');
        await axios.post(config.serverURL + '/bg/card/change', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          console.log(response)
        })
        this.data.isSaving = false
        this.getTable()
      },
      cardInfoChanged(data) {
        this.data.editcardInfoSelectedItem = JSON.parse(JSON.stringify(data)).data
      },
      tableRowClick(data) {
        for (let i = 0; i < Object.keys(data).length; i++) {
          try {
            data[Object.keys(data)[i]] = JSON.parse(data[Object.keys(data)[i]])
          } catch (e) {
  
          }
        }
        data = JSON.parse(JSON.stringify(data))
        this.data.editcardInfoSelectedItemMark = data.mark
        delete data['mark']
        this.data.editcardInfoSelectedItem = data
        this.data.showEditcardInfoForm = true
      },
      async deleteSingle() {
        this.data.loading = true
        await tool.axiosPostWithCheckStatus(config.serverURL, '/bg/card/deleteSingle', {
          token: this.bgData.loginedAdminInfo.token,
          mark: this.data.editcardInfoSelectedItemMark
        })
        this.data.loading = false
        this.data.form.page = 1
        this.data.showEditcardInfoForm = false
        this.getTable()
      },
      tableChangePage() {
        this.data.form.warningText = ''
        let a = parseInt(this.data.form.pageInput)
        if (isNaN(a)) {
          this.data.form.warningText = '页码应为数字'
          return
        } else {
          if (a < 1 || a > this.data.form.pageTotal) {
            this.data.form.warningText = '页码应在1到' + this.data.form.pageTotal.toString() + '之间'
            return
          }
          this.data.form.page = a
          this.getTable()
        }
      },
      imported() {
        this.getTable()
      },
      async getTable() {
        this.data.loading = true
        let re = (await tool.axiosPostWithCheckStatus(config.serverURL, '/bg/card/list', {
          token: this.bgData.loginedAdminInfo.token,
          page: this.data.form.page,
          size: this.data.form.size,
          key: this.data.form.key,
          level:this.data.form.level
        }))
        console.log(re)
        this.data.form.total = re.results.total
        this.data.form.pageTotal = tool.getPageTotal(re.results.total, this.data.form.size)
        this.data.table = re.results.data
        this.data.loading = false
      }
    },
  
    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {
      this.getTable()
    },
  
    props: {
      appData: undefined,
      bgData: undefined
    },
  
    //监听属性 类似于data概念",
    computed: {},
  
    //监控data中的数据变化",
    watch: {},
  
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
    },
  
    //生命周期 - 挂载之前",html模板未渲染
    beforeMount() {
    },
  
    //生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {
    },
  
    // 生命周期 - 销毁之前调用
    beforeDestroy() {
    },
  
    //生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {
    },
  
    //生命周期 - 销毁完成"
    destroyed() {
    },
  
    //如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {
    }
  }
  </script>
  
  <style scoped>
  
  </style>